<template>
  <view class="wrap">
    <view class="header">
      <image
        class="header-bg"
        v-if="questionnaireCode == '4'"
        src="https://ainengli.hzjrsw.com/jkhx/weight/isi-bg.png"
        mode="scaleToFill"
      />
      <image
        class="header-bg"
        v-if="questionnaireCode == '5'"
        src="https://ainengli.hzjrsw.com/jkhx/weight/srss-bg.png"
        mode="scaleToFill"
      />
      <image
        class="header-bg"
        v-if="questionnaireCode == '6'"
        src="https://ainengli.hzjrsw.com/jkhx/weight/ais-bg.png"
        mode="scaleToFill"
      />
      <image
        class="header-bg"
        v-if="questionnaireCode == '7'"
        src="https://ainengli.hzjrsw.com/jkhx/weight/ess-bg.png"
        mode="scaleToFill"
      />
    </view>
    <view class="content-box">
      <view class="content-main">
        <text class="questionnaire-name">{{ questionnaireName }}</text>
        <view class="title">
          <view class="title-icon" />
          <text class="title-text">简介</text>
        </view>
        <text class="title-content" style="margin-bottom: 48rpx">{{ descContent }}</text>
        <view class="title">
          <view class="title-icon" />
          <text class="title-text">提示</text>
        </view>
        <text class="title-content">{{ tipsContent }}</text>
      </view>
    </view>
    <view class="start-btn">
      <text class="btn-text" @tap="startHandle">开始测评</text>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

const questionnaireName = ref('睡眠情况自评量表（SRSS）')
const descContent = ref('')
const tipsContent = ref('')

let questionnaireCode = ''

onShow(() => {
  if (uni.hideHomeButton) {
    uni.hideHomeButton()
  }
})

onLoad((options) => {
  if (options && options.type) {
    questionnaireCode = options.type
    switch (options.type) {
      case '4':
        questionnaireName.value = '失眠严重程度指数 (ISI)'
        descContent.value = `失眠指数量表于1993年由Morin编制，用于评估失眠的严重程度及失眠对身体健康、日常功能、生活质量的影响程度。该量表有3个版本，下面版本用于评估被调查对象前2周失眠情况。该量共有7个条目，采用Likert5级评分法，每个条目0~4分，总分为0~28分，评分越高表明失眠程度越严重。`
        tipsContent.value = `请选择最准确地描述您在过去两周中睡眠情况的选项。`
        break
      case '5':
        questionnaireName.value = '睡眠情况自评量表（SRSS）'
        descContent.value = `睡眠状况自评量表(self-rating scale of sleep，SRSS)由李建明于2012年编制，为自评量表，主要用于睡眠障碍患者治疗前后的评定。该量表的信度r=0.6418，效度r=0.5625。
          SRSS包含10个条目，每个条目都采用5级评分法，即1～5分。该量表的最低总分为10分（表示基本没有睡眠问题），最高总分为50分（表示睡眠问题最严重）。总分越高，说明睡眠障碍越严重。`
        tipsContent.value = `请仔细阅读每一条，把意思弄明白，然后根据您近 1个月内实际情况，进行选择。`
        break
      case '6':
        questionnaireName.value = '阿森斯失眠量表（AIS）'
        descContent.value = `AIS量表是国际公认的，可靠的进行睡眠质量自测的量表，适用于公共睡眠质量状况调查。该表以受试者对睡眠的主观感受为评定内容，根据总分确定结果。该量表共有8个项目，分别是入睡时间、夜间觉醒、早醒、睡眠时间、睡眠质量、白天情绪、白天身体功能、白天思睡，采用四级评分法，即每个因子按0～3等级评分，总分越高，表明睡眠质量越差。`
        tipsContent.value = `对于以下列出的问题，如果在过去1个月内每星期至少发生3次在您身上，请选择相应选项。`
        break
      case '7':
        questionnaireName.value = 'Epworth嗜睡量表（ESS）'
        descContent.value = `Epworth嗜睡量表（ESS）是一种用于评估白天嗜睡程度的自评量表，由澳大利亚墨尔本Epworth医院的M. Johns教授于1991年编制。该量表通过询问受试者在8种不同情境下出现困倦或打盹的可能性，来评估其白天的嗜睡程度。量表总分为0-24分，分数越高表示嗜睡程度越严重。`
        tipsContent.value = `在下列情况下，除了感到疲劳外，您是不是更有可能打瞌睡或入睡？这些是近期您的日常生活事件。 假如近来您并没有做下面列出的事情，那么想象以下它们会如何影响到您。`
        break
      default:
        break
    }
  }
})

const startHandle = () => {
  uni.navigateTo({
    url: '/module/src/pages/sleep/sleepAssessment/content?type=' + questionnaireCode
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding-bottom: 208rpx;
}

.header {
  position: absolute;
  z-index: -1;
  width: 100%;
}

.header-bg {
  width: 100%;
  height: 574.84rpx;
}

.questionnaire-name {
  display: inline-block;
  margin-bottom: 24rpx;
  font-size: 44rpx;
  font-weight: 700;
  color: #222;
}

.content-box {
  width: 100%;
  padding: 32rpx;
  margin-top: 390rpx;

  .content-main {
    padding: 32rpx;
    background: #fff;
    border: 1rpx solid #fff;
    border-radius: 16rpx;
  }
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;

  .title-icon {
    width: 8rpx;
    height: 32rpx;
    margin-right: 16rpx;
    background-color: #00d1b6;
    border-radius: 0 8rpx 8rpx 0;
  }

  .title-text {
    font-size: 36rpx;
    font-weight: 700;
    color: #222;
  }
}

.start-btn {
  position: fixed;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 208rpx;
  padding-top: 24rpx;
  background-color: #fff;

  .btn-text {
    display: inline-block;
    width: 686rpx;
    height: 88rpx;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 88rpx;
    color: #fff;
    text-align: center;
    background: #00d1b6;
    border-radius: 44rpx;
  }
}

.title-content {
  display: inline-block;
  font-size: 26rpx;
  font-weight: 500;
  line-height: 44rpx;
  color: #666;
}
</style>
